//路由配置信息
//引入路由组件
//路由懒加载 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
//如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
import MyOrder from '@/pages/Center/myOrder';
import GroupBuy from '@/pages/Center/myOrder'
export default [
       //重定向
    {
        path:"*",
        redirect:"/home",
     },
    //首页
    {
        
        path:"/home",
        name:"home",
        //路由懒加载方式
        component:() => import('@/pages/Home'),
        meta:{show:true},
    },
      // 注册页面
      {
       
        path:"/register",
        name:"register",
        component:() => import('@/pages/Register'),
        meta:{show:false},
    },
      //登录页面
    {
       
        path:"/login",
        name:"login",
        component:() => import('@/pages/Login'),
        meta:{show:false},
    },
       //搜索页面
    {
        
        path:"/search/:keyword?",
        name:"search",
        component:() => import('@/pages/search'),
        meta:{show:true},
        //路由可以使用props传参吗
        //答:可以的 一般用来简化路由参数层级 并且props传参有三种写法 布尔值,函数式
        //布尔值写法但是只能是传params
        props:true,
        //对象写法
        // props:{
        //     a:1,
        //     b:2,
        // }
        //函数写法
        // props: ($route) => 
             //小技巧, 去掉return 然后给内容外添加一个小括号
        //       ({
        //         keyword:$route.params.keyword,
        //         k:$route.query.k
        //      })
        //   
    },
     //商品详情页
     {       
      path:"/detail/:id?",
      name:"detail",
      component:() => import('@/pages/Detail'),
      meta:{show:true},
  },
     //添加购物车
     {
       
      path:"/addcartsuccess",
      name:"addcartsuccess",
      component:() => import('@/pages/AddCartSuccess'),
      meta:{show:true},
  },
    //购物车
    {
       
        path:"/shopcart",
        name:"shopcart",
        component:() => import('@/pages/ShopCart'),
        meta:{show:true},
    },   
    //交易提交订单
    {
       path:'/trade',
       name:'trade',
       component:() => import('@/pages/Trade'),
       beforeEnter (to,from,next){
        // 只能从购物车页面进入到交易界面
        if(from.path == '/shopcart'){
           next()
         }else{
            next('/shopcart')
         }
       }
    },
    //支付
    {
        path: '/pay',
        name:'pay',
        component:() => import('@/pages/Pay'),
         // 将query参数映射成props传递给路由组件
        props: route => ({orderId: route.query.orderId}),

    /* 只能从交易界面, 才能跳转到支付界面 */
    beforeEnter (to, from, next) {
      if (from.path==='/trade') {
        next()
      } else {
        next('/trade')
      }
    }
    },
    //支付成功页面
    {
        path: '/paysuccess',
        component: () => import('@/pages/PaySuccess'),
        /* 只有从支付界面, 才能跳转到支付成功的界面 */
        beforeEnter (to, from, next) {
          if (from.path==='/pay') {
            next()
          } else {
            next('/pay')
          }
        }
      },
   // 个人中心
      {
        path:'/center',
        component: () => import('@/pages/Center'),
        //个人中心的二级路由 
        children:[
          //子路由
          {
            path: 'myorder',
            component: MyOrder,
          },
          {
            path:'groupbuy',
            component:GroupBuy,
          },
          {
            path: '',
            redirect:'myorder',
          }
         

        ]
      },
      
      // 我的测试页面
     {
      path: "/test",
      name:"test",
      component:() => import("@/pages/test")
     },
     // $attrs和$listeners
     {
      path: "/attrlisteners",
      name:"attrlisteners",
      component:() => import("@/pages/Attrslisteners/Attrslisteners")
     },

   
]